<template>
    <div class="footer-warp">
        <div class="play">
            <div class="play-left">
                <img src="#">
            </div>
            <div class="play-right">
                <div>
                    <span>红玫瑰</span>
                    <span>歌词</span>
                </div>
                <div>
                    <svg class="icon">
                        <use xlink:href="#icon-bofang"></use>
                    </svg>
                    <svg class="icon">
                        <use xlink:href="#icon-playlistMusic"></use>
                    </svg>
                </div>
            </div>
        </div>
        <div class="menu">
            <div>首页</div>
            <div>其他</div>
            <div>我的</div>
            <div>我的</div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed } from 'vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
/**
* 仓库
*/
const store = useStore();
/**
* 路由对象
*/
const route = useRoute();
/**
* 路由实例
*/
const router = useRouter();
//console.log('1-开始创建组件-setup')
/**
* 数据部分
*/
const data = reactive({})
onBeforeMount(() => {
    //console.log('2.组件挂载页面之前执行----onBeforeMount')
})
onMounted(() => {
    //console.log('3.-组件挂载到页面之后执行-------onMounted')
})
watchEffect(() => {
})
// 使用toRefs解构
// let { } = { ...toRefs(data) } 
defineExpose({
    ...toRefs(data)
})

</script>
<style scoped lang='less'>
.footer-warp {
    // height: 2rem;
    margin-bottom: 0.3rem;

    .play {
        display: flex;
        height: 0.9rem;
        align-items: center;
        margin: 0 0.2rem;
        // background-color: #ffffff;

        .play-left {
            position: relative;
            width: 12%;
            height: 100%;

            &::before {
                content: '';
                width: 60%;
                height: 85%;
                background-color: #000000;
                position: absolute;
                right: -15%;
                top: 8%;
                border-radius: 50%;
                -webkit-clip-path: inset(0% 0% 0% 74%);
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        .play-right {
            flex: 1;
            background-color: #ffffff;
            border-top-right-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            height: 100%;
            display: flex;
            align-items: center;
            div{
                &:nth-child(1){
                    flex: 1;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    padding-left: 0.2rem;
                    span{
                        &:nth-child(1){
                            font-weight: 600;
                            color: #000000;
                        }
                        &:nth-child(2){
                            font-size: 10px;
                        }
                    }
                }
                &:nth-child(2){
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    width: 30%;
                    height: 100%;
                    margin-right: 0.3rem;
                    svg{
                        width: 60%;
                        height: 55%;
                        color: #000000;
                    }
                }
            }
        }
    }

    .menu {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 1.1rem;
    }
}
</style>